<template>



    <el-container class="container">
        <el-header class="header">东软云医院管理系统 {{ username }}

            <div class="logout">
                <el-button type="warning" link @click="logout">退出</el-button>
            </div>


        </el-header>
        <el-container>
            <el-aside width="200px" class="aside">
                <SysMenu></SysMenu>

            </el-aside>
            <el-main class="main">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>

                    <el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item>
                </el-breadcrumb>
                <router-view></router-view>

            </el-main>
        </el-container>
    </el-container>

</template>


<script lang="ts" setup name="Home">
import { RouterView } from 'vue-router'
import SysMenu from "@/components/SysMenu.vue";
import { onMounted, ref } from 'vue';
import axios from 'axios';
import { service } from "@/utils/request";
import { useRouter, type Router } from "vue-router";
const router: Router = useRouter()

let username = ref('');


onMounted(() => {
    service.get<string>("/get_user_info/info").then(userName => {
        console.log(userName)
        username.value = userName;
    })
})


function logout() {
    router.replace('/login')
}

</script>


<style scoped>
.container {

    width: 100vw;
    height: 100vh;
}

.header {
    background-color: #C6E2FF;
}

.aside {
    background-color: #545C64;
}

.main {
    background-color: #ECF5FF;
}

/* .menu {
    height: 100%;
    width: 300px;
    background-color: cadetblue;
}


.content {
    height: 100%;
    width: calc(100% - 300px);
    background-color: rgb(176, 188, 189);
} */

.logout {

    float: right;

}

.main {
    padding: 10px;
}
</style>
